<template>
  <div class="card">
    <div class="timeline">
      <div v-for="(value, key, index) in timeLine" :key="index" :class="type[index % 5]">
        <div class="tl-header">
          <div>{{ key }}</div>
        </div>
        <div v-for="timeLineItem in value" :key="timeLineItem.id" class="tl-item">
          <div class="tl-wrap">
            <span class="tl-date">{{ timeLineItem.day }}日</span>
            <span class="tl-title" @click="handleTitle(timeLineItem.id)">{{ timeLineItem.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getBlogTimeLine } from '@/api/blog.js'

const timeLine = ref([])
const total = ref()
const router = useRouter()

defineOptions({ name: 'archives' })

const type = {
  0: 'tl-blue',
  1: 'tl-dark',
  2: 'tl-green',
  3: 'tl-red',
  4: 'tl-purple',
}

onActivated(() => {
  console.log('onActivated')
  getData()
})

function getData() {
  getBlogTimeLine().then((res) => {
    timeLine.value = res.data.data
    total.value = res.data.length
  })
}

function handleTitle(blogId) {
  router.push(`/blog/${blogId}`)
}
</script>

<style scoped>
.timeline {
  margin: 20px 0;
}

.tl-header {
  width: 7em;
  text-align: center;
  border-radius: 5px;
  margin-left: 2.5em;
  padding: 2px 2px;
}

.tl-date {
  position: relative;
  display: block;
  float: left;
  width: 4.5em;
  margin-left: -7.5em;
  text-align: right;
}

.tl-wrap {
  padding: 15px 0 15px 20px;
  margin-left: 6em;
  border-style: solid;
  border-width: 0 0 0 4px;
}

.tl-wrap:before {
  position: relative;
  top: 8px;
  float: left;
  width: 10px;
  height: 10px;
  margin-left: -27px;
  background: #fff;
  border-color: inherit;
  border-style: solid;
  border-width: 3px;
  border-radius: 50%;
  content: '';
  box-shadow: 0 0 0 4px #fff;
}

.tl-wrap:hover:before {
  background: 0 0;
  border-color: #fff;
}

.tl-title {
  margin-left: 0 !important;
  letter-spacing: 0.3px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  padding: 8px 8px !important;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 20px;
}

.tl-title::before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 10px;
  left: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.tl-blue .tl-header,
.tl-blue .tl-item .tl-title {
  background: #23b7e5 !important;
  color: #fff !important;
}

.tl-blue .tl-item .tl-title::before {
  border-right: 7px solid #23b7e5;
}

.tl-blue .tl-item .tl-wrap {
  border-color: #23b7e5;
}

.tl-dark .tl-header,
.tl-dark .tl-item .tl-title {
  background: #3a3f51 !important;
  color: #fff !important;
}
.tl-dark .tl-item .tl-title::before {
  border-right: 7px solid #3a3f51;
}

.tl-dark .tl-item .tl-wrap {
  border-color: #3a3f51;
}

.tl-green .tl-header,
.tl-green .tl-item .tl-title {
  background: #27c24c !important;
  color: #fff !important;
}

.tl-green .tl-item .tl-title::before {
  border-right: 7px solid #27c24c;
}

.tl-green .tl-item .tl-wrap {
  border-color: #27c24c;
}

.tl-purple .tl-header,
.tl-purple .tl-item .tl-title {
  background: #7266ba !important;
  color: #fff !important;
}

.tl-purple .tl-item .tl-title::before {
  border-right: 7px solid #7266ba;
}

.tl-purple .tl-item .tl-wrap {
  border-color: #7266ba;
}

.tl-red .tl-header,
.tl-red .tl-item .tl-title {
  background: #f05050 !important;
  color: #fff !important;
}

.tl-red .tl-item .tl-title::before {
  border-right: 7px solid #f05050;
}

.tl-red .tl-item .tl-wrap {
  border-color: #f05050;
}
</style>
